<template>
  <nav-bar></nav-bar>
  <div class="add-box">
    <el-card class="left-form">
      <!-- 这里要写一个卡片，卡片里面是收集用户信息的表单 -->
      <!--  管理员添加事件收集数据的表单 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        :size="formSize"
        status-icon
        style="max-width: 480px"
      >
        <!-- *类型 -->
        <el-form-item label="事件类型" prop="type">
          <el-select
            v-model="ruleForm.type"
            placeholder="请选择事件类型"
            :teleported="false"
          >
            <el-option label="刮擦" value="刮擦" />
            <el-option label="碰撞" value="碰撞" />
            <el-option label="翻车" value="翻车" />
            <el-option label="碾压" value="碾压" />
            <el-option label="失火" value="失火" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <!-- *严重程度 -->
        <el-form-item label="严重程度" prop="grade">
          <el-select
            v-model="ruleForm.grade"
            placeholder="请选择对应的事故严重程度"
            :teleported="false"
          >
            <el-option label="轻微事故" value="1" />
            <el-option label="一般事故" value="2" />
            <el-option label="重大事故" value="3" />
            <el-option label="特大事故" value="4" />
          </el-select>
        </el-form-item>
        <!-- *地点名 -->
        <el-form-item label="事发位置" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <!-- *点点获得经纬度 -->
        <el-form-item label="经纬度位置" prop="lnglat">
          <el-input
            v-model="ruleForm.lnglat"
            placeholder="请您在右侧地图上添加点位"
          />
        </el-form-item>
        <!-- 驾驶人姓名 -->
        <el-form-item label="驾驶人姓名" prop="driver">
          <el-input v-model="ruleForm.driver" />
        </el-form-item>
        <!-- 车牌号 -->
        <el-form-item label="车牌号" prop="carnumber">
          <el-input v-model="ruleForm.car_number" />
        </el-form-item>
        <!-- 描述 -->
        <el-form-item label="事故描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            type="textarea"
            rows="8"
            resize="none"
            class="left-textarea"
          />
        </el-form-item>
        <!-- 提交按钮 -->
        <!-- 重置按钮 -->
        <!-- 返回按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
          <el-button plain type="primary" @click="resetForm(ruleFormRef)"
            >重置</el-button
          >
          <el-button @click="toEvent(ruleFormRef)">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="right-map">
      <div id="map" class="map-box">
        <el-button type="primary" @click="handleAdd" class="map-btn"
          >添加事件点</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue"
import { initMap } from "./Hooks/useAddInitMap"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import { EventHttp } from "../../http/event"
import NavBar from "../../components/NavBar.vue"

import { useUserStore } from "../../stores/users"

const router = useRouter()

const myres = ref([])
/* 存储页面中的表单的数据的变量 */
/* 这个user_id是提交这个表单的用户，联调之后，
这个会从用户信息的地方动态获取 */
const userPinia = useUserStore()
let userId = userPinia.user.id
const ruleForm = reactive({
  type: "",
  grade: null,
  address: "",
  lnglat: "",
  driver: "",
  car_number: "",
  description: "",
  user_id: userId,
})
const { handleAdd, flag, mylnglat, handleAddPoint } = initMap({ ruleForm })

onMounted(() => {
  initMap({ ruleForm })
})
/* 控制表单内控件的尺寸，不能删掉，因为没有默认值 */
const formSize = ref("default")
/* 提交表单的时候会验证信息是否填正确 */
const ruleFormRef = ref()

const rules = reactive({
  type: [
    {
      required: true,
      message: "请您选择事件类型",
      trigger: "change",
    },
  ],
  grade: [
    {
      required: true,
      message: "请您选择事件严重程度",
      trigger: "change",
    },
  ],
  address: [
    { required: true, message: "请您填写事故发生具体位置", trigger: "blur" },
  ],
  lnglat: [
    {
      required: true,
      message: "请您点击右侧的地图将事故发生地点添加到地图上",
      trigger: "blur",
    },
  ],
  driver: [
    { min: 2, max: 6, message: "驾驶员姓名长度在2-5之间", trigger: "blur" },
  ],
  car_number: [
    { min: 1, max: 6, message: "请您填写正确的车牌号", trigger: "blur" },
  ],
  description: [
    {
      required: true,
      message: "请您填写事件发生的详细信息",
      trigger: "blur",
    },
  ],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      /* 先要判断是否在地图上点点了，如果没有就让他在地图上点点
        所以要搞一个变量标志一下，这个变量的值变了，才让他提交，这个改变标志变量的值的功能在hooks里面写好了 */
      if (flag) {
        /* 向后端发送请求 */
        let res = await EventHttp.submitEvent(ruleForm)
        /* 如果数据成功写入数据库，code==200，拿到返回的结果，就把这个添加到空间数据库中 */
        if (res.code == 200) {
          myres.value = res.result
          /* 从后端接口返回的数据可以结构出来 */
          /* 为空间数据库做准备 */
          let { id, lnglat, car_number, grade, submit_time, type, address } =
            myres.value
          //console.log(id)
          let arr = lnglat.split(",")
          /* 将数组将里边的元素转成数字型 */
          arr = arr.map(Number)
          let driver = ruleForm.driver
          //console.log(driver)
          var attr = [
            { type: "string", key: "驾驶员", value: driver },
            { type: "string", key: "事件编号", value: id },
            { type: "int", key: "处理状态", value: 0 },
            { type: "string", key: "事件类型", value: type },
            { type: "int", key: "事件等级", value: grade },
            { type: "string", key: "发生时间", value: submit_time },
            { type: "string", key: "发生地点", value: address },
            { type: "string", key: "车牌号", value: car_number },
          ]
          let service = {
            name: "traffic",
            layerId: 2,
          }
          //console.log(attr)
          /* 写入空间数据库中 */
          handleAddPoint(arr, attr, service)
          ElMessage({
            message: "事故提交成功！",
            type: "success",
          })
        }

        /* 接下来要向空间数据库添加数据 */
      } else {
        ElMessage.error(
          "请您在地图上添加对应点位获取经纬度，自己输入经纬度无效"
        )
        /* elementui提示先在地图上点点 */
        return false
      }
    } else {
      ElMessage.error("请您填写事件的相关信息")
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.car_number = ""
}

/* 返回的按钮 */
const toEvent = (formEl) => {
  if (!formEl) {
    router.push("/event")
    return
  }
  formEl.resetFields()
  router.push("/event")
}
</script>
<style scoped lang="stylus">
.add-box
    height 90vh
    width:100%
    /* background-color pink */
    display flex
    align-items center
    justify-content space-evenly
    .left-form
        height 87.5vh
        width:48%
        /* background-color orange */
        .left-textarea
            overflow:auto
        .el-button
            padding:8px 35px
        .el-button+.el-button
            margin-left:29px
    .right-map
        height 88vh
        width:48%
        /* background-color green */
        .map-box
            height:100%
            width:100%
            position relative
            .map-btn
              z-index:30
              position absolute
              top 10px
              left 50px
</style>
